import { StyleSheet, View } from 'react-native';
import React, { useMemo } from 'react';
import { useRoute } from '@react-navigation/native';
import WebView from 'react-native-webview';
import { useTranslation } from 'react-i18next';
import { baseURL } from '!/app.json';
import { NavBarHeader } from '~/components';
import { appStore, userStore } from '~/store';

export default function DeviceDateView() {
    const router: any = useRoute();
    const { deviceInfo, category, acupointParams = '', type = '', userId = '' } = router.params || {};
    const { t } = useTranslation();
    const { token, user_id } = userStore.me;
    const getUrl = useMemo(() => {
        let url = '';
        const randomnumber = Math.floor(Math.random() * 100000);
        if (category == 'BloodRecords') {
            url = `${baseURL}wxdata/Testrecord.html?token=${token}&deviceId=${deviceInfo.device_id}&sn=${deviceInfo?.device_sn}&time=${randomnumber}&local=${appStore.app.language}`;
        } else if (category == 'Bloodcontrast') {
            url = `${baseURL}wxdata/bloodcontrast.html?token=${token}&deviceId=${deviceInfo.device_id}&sn=${deviceInfo?.device_sn}&time=${randomnumber}&local=${appStore.app.language}`;
        } else if (category == 'BloodHealthweekly') {
            url = `${baseURL}wxdata/Healthweekly.html?token=${token}&deviceId=${deviceInfo.device_id}&sn=${deviceInfo?.device_sn}&time=${randomnumber}&local=${appStore.app.language}`;
        } else if (category == 'acupoint') {
            url = `${baseURL}wxdata/acupoints/acupoints.html?armariumScienceSession=${token}&json=${acupointParams}&userId=${
                type == 'doctor' ? userId : user_id
            }&zh=${appStore.app.language}`;
        }
        console.log('urlurlurlurl', url);
        return url;
    }, [category, token]);
    return (
        <View style={styles.container}>
            <NavBarHeader
                StatusBarProps={{ barStyle: 'dark-content' }}
                title={
                    category == 'BloodRecords'
                        ? t('DeviceDateView.t1')
                        : category == 'Bloodcontrast'
                        ? t('DeviceDateView.t2')
                        : category == 'BloodHealthweekly'
                        ? t('DeviceDateView.t3')
                        : ' '
                }
            />
            <WebView
                style={{ flex: 1 }}
                source={{
                    uri: getUrl,
                }}
                domStorageEnabled={true}
                javaScriptEnabled={true}
                incognito={true}
                textZoom={100}
                startInLoadingState={true}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1 },
});
